<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>345登录</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=1.0, user-scalable=no" />  
		<link rel="stylesheet" href="css/simple-line-icons.css">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui-ext.css">
		<script src="js/mui.min.js"></script>
		<style>
			body,
			.mui-content {
				background-color: #fff;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 30%;
			}
			
			.mui-input-row {
				height: 40px;
				margin-top: 20px;
				padding-bottom: 10px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
				text-align: center;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-content {
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.login-logo {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.login-title {
				padding-top: 10px;
				padding-bottom: 10px;
				color: #00a8c6;
			}
			
			#login-form {
				padding-top: 0px;
				padding-bottom: 20px;
				padding-left: 30px;
				padding-right: 30px;
			}
			
			#btn_login {
				width: 70%;
				line-height: 2;
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				height: 0px;
			}
			
			.mui-input-group .mui-input-row {
				height: 45px;
			}
			
			.link-area a {
				color: #bfbfbf;
			}
			
			.input-icon {
				margin-left: 10px;
			}
			
			/**
			 * 提示框
			 */
			.mui-popup {
			    width: 440px;
			    height: 242px;
			}
			
			.mui-popup-inner {
			    padding: 30px;
			    height: 50%;
			    border-radius: 13px 13px 0 0;
			}
			
			.mui-popup-title {
			    font-size: 38px;
			    font-weight: 500;
			    height: 50px;
			    text-align: center;
			}
			
			.mui-popup-title+.mui-popup-text {
			    font-family: inherit;
			    font-size: 28px;
			    height: 40px;
			    margin: -4px 0 0;
			}
			
			.mui-popup-buttons {
			    position: relative;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    height: 50%;
			    -webkit-box-pack: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			}
			
			.mui-popup-button {
			    font-size: 34px;
			    line-height: 44px;
			    position: relative;
			    display: block;
			    overflow: hidden;
			    box-sizing: border-box;
			    width: 100%;
			    height: 70px;
			    padding: 10px 5px;
			    cursor: pointer;
			    text-align: center;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    color: #007aff;
			    background: rgba(255, 255, 255, .95);
			    -webkit-box-flex: 1;
			}
		</style>
		<script src="js/md5.js"></script>
		<script src="js/utils/http.utils.js"></script>
		<script type="text/javascript">
			var $rePhone = /^1[3|4|5|8][0-9]\d{4,8}$/;
			function userLogin() {
				var $username = document.getElementById("ipt-username").value;
				if($username == null && $username == "") {
					mui.alert("请输入电话号码!");
					return;
				}
				if(!$rePhone.test($username)) {
					mui.alert("手机号格式不正确，请重新输入！");
					return;
				}

				var $password = document.getElementById("ipt-pword").value;
				if($password == null && $password == "") {
					mui.alert("请输入密码!");
					return;
				}
				mui.ajax({
					url: $request_url.userLogin,
					type: "post",
					headers: {
						"Authorization": $headers_authorization
					},
					data: {
						mobile: $username,
						password: hex_md5($password)
						//password: $password
					},
					dataType: "json",
					success: function(dat) {
						if(dat.code == 0) {
							console.log(dat.result);
							console.log(dat.result.parent);
							//登录身份为家长
							if(dat.result.parent){
								localStorage.setItem("login-user-parent", JSON.stringify(dat.result));
								mui.openWindow({
									url : "family-index.html"
								}); 
							}
							//登录身份为专家
							if(dat.result.expert) {
								localStorage.setItem("login-user-expert", JSON.stringify(dat.result));
								mui.openWindow({
									url : "expert-index.html"
								});
							}
						} else {
							mui.toast(dat.message);
							return;
						} 
					},
					error: function(e) {
						mui.toast("请求失败，稍后重试....");
						return;
					}
				});
			}
		</script>

	</head>

	<body style="margin-bottom: 150px; margin-top: 150px; width: 100%; height: 100%;">
		<div class="mui-content" align="center">
			<div class="login-logo">
				<img src="img/login/logo_03.png" width="180" height="180" />
				<h2 class="login-title">家长无难事</h2>
			</div>
			<form id='login-form'>
				<div class="mui-input-group">
					<div class="mui-input-row" style="background: url(img/login/kuang_03.png) no-repeat; width: 520px; height: 76px;">
						<label style="margin-top: 8px; margin-bottom: 8px; margin-left: -40px;"><img src="img/login/dianhua_03.png" width="32" height="42" class="input-icon"/></label>
						<input id="ipt-username" type="text" class="mui-input-clear mui-input" style="margin-top: 20px; margin-bottom: 20px; font-size: 26px;" value="13451277731" placeholder="请输入手机号码/用户名">
					</div>
					<div class="mui-input-row" style="background: url(img/login/kuang_03.png) no-repeat; width: 520px; height: 76px;">
						<label style="margin-top: 8px; margin-bottom: 8px; margin-left: -40px;"><img src="img/login/mima_07.png" width="32" height="42"/></label>
						<input id="ipt-pword" style="font-size: 26px; margin-top: 20px; margin-bottom: 20px;" type="password" value="1q2w3e4r5t" placeholder="请设置账号密码" />
					</div>
				</div>
			</form>
			<br /><br />
			<div class="mui-content-padded">
				<button id='btn_login' onclick="userLogin();" type="button" style="background: url(img/login/dengluanniu_03.png); width: 490px; height: 70px; border: 0px;"></button>
			</div>
			<br /><br />
			<div class="" style="font-size: 30px; color: #909090;">
				<a href="reg.html" id="go-reg" style="color: #909090;">不是会员，去注册</a><br />
				<hr width="180" />
				<br /><br />

				<a id="forget-pword" style="color: #909090;">忘记密码？求助<img src="img/login/jiantou_03.png"></a><br />
				<hr width="160" />
			</div>
		</div>
		</footer>
	</body>

</html>